<template>
  <el-form :model="state.formData" ref="dynamicForm" :rules="state.formRules" :label-width="labelWidth"
    :inline="inline">
    <slot></slot>
    <span v-for="fItem in props.formItemList" :key="fItem.name">
      <el-form-item :label="fItem.label" :prop="fItem.name">
        <el-input v-if="fItem.type === 'input'" v-model="state.formData[fItem.name]"
          :placeholder="`请输入${fItem.label}`" />
        <el-select v-if="fItem.type === 'select'" v-model="state.formData[fItem.name]"
          :placeholder="`请选择${fItem.label}`" clearable>
          <el-option v-for="opt in fItem.options" :key="opt[fItem.valueFiled]"
            :label="opt[fItem.labelFiled] || opt.label" :value="opt[fItem.valueFiled] || opt.value" />
        </el-select>
        <el-tree-select v-if="fItem.type === 'treeSelect'" default-expand-all check-strictly
          v-model="state.formData[fItem.name]" :data="fItem.options" :placeholder="`请选择${fItem.label}`" />
        <el-radio-group v-if="fItem.type === 'radioGroup'" v-model="state.formData[fItem.name]">
          <el-radio v-for="opt in fItem.options" :key="fItem.valueFiled ? opt[fItem.valueFiled] : opt"
            :label="opt[fItem.valueFiled]">{{ opt[fItem.labelFiled] }}
          </el-radio>
        </el-radio-group>
        <el-checkbox-group v-if="fItem.type === 'checkboxGroup'" v-model="state.formData[fItem.name]">
          <el-checkbox v-for="opt in fItem.options" :key="fItem.valueFiled ? opt[fItem.valueFiled] : opt"
            :label="fItem.labelFiled ? opt[fItem.labelFiled] : opt"
            :value="fItem.valueFiled ? opt[fItem.valueFiled] : opt" />
        </el-checkbox-group>
        <el-date-picker v-if="fItem.type === 'datePicker'" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
          v-model="state.formData[fItem.name]" type="date" :placeholder="`请输入${fItem.label}`" style="width: 100%" />
        <el-input v-if="fItem.type === 'textarea'" type="textarea" v-model="state.formData[fItem.name]"
          :placeholder="`请输入${fItem.label}`" />
        <el-cascader v-if="fItem.type === 'cascader'" type="cascader" filterable placeholder="可直接搜区县例如：延长县然后选中"
          class="profile-cascader" style="width: 100%;" :options="pcaTextArr" @change="placeChange"
          v-model="state.formData[fItem.name]" />
        <Editor v-if="fItem.type === 'editor'" v-model="state.formData[fItem.name]" :height="fItem.height" />
        <UploadImg v-if="fItem.type === 'uploadImg'" v-model="state.formData[fItem.name]" :limit="1" />
        <UploadFile v-if="fItem.type === 'uploadFile'" v-model="state.formData[fItem.name]" type="yaoWen" :limit="1" />
      </el-form-item>
      <div class="form-item" v-if="fItem.type === 'formItem'">{{ fItem.title }}</div>
    </span>
  </el-form>
</template>

<script lang="ts" setup>
import { Editor } from '@/components/Editor'
import globalApi from '@/api/spb/global'
import { el } from 'element-plus/es/locale'
import { regionData, pcaTextArr } from 'element-china-area-data'

const props = defineProps({
  formItemList: {
    type: Array,
    default: () => []
  },
  formObj: {
    type: Object,
    default: () => { }
  },
  rules: {
    type: Object,
    default: () => { }
  },
  inline: {
    type: Boolean,
    default: false
  },
  labelWidth: {
    type: String,
    default: '80px'
  },
  autoRules: {
    type: Boolean,
    default: false
  }
})

const state = reactive({
  formRules: {},
  formData: {}
})
const fileList = ref([])
const dynamicForm = ref()
const address = ref('')
watch(
  () => props.formObj,
  (n, o) => {
    // console.log('form data', n, o)
    state.formData = n
    if (state.formData.address === '') {
      state.formData.address = address.value
    } else {
      if (typeof state.formData.address === 'string') {
        state.formData.address = (state.formData.address).match(/.+?(省|市|自治区|自治州|县|区)/g)
      }
    }
  },
  {
    deep: true,
    immediate: true
  }
)

function handleUpload(file) {
  console.log('file', file)
  const formData = new FormData()
  formData.append('file', file.file)
  const params = {
    path: file.file.name
  }
  globalApi.uploadFile(formData, params).then((res) => {
    console.log('upload file', res)
  })
}

function autoGenerateRules() {
  if (props.rules) {
    state.formRules = props.rules
    setTimeout(() => {
      dynamicForm.value.clearValidate()
    }, 0)
    return
  }
  props.formItemList.forEach((fItem) => {
    state.formRules[fItem.name] = [
      { required: fItem.require, message: `请补充${fItem.label}`, trigger: 'change' }
    ]
  })
  setTimeout(() => {
    dynamicForm.value.clearValidate()
  }, 0)
}

//赋值給级联选择器
const options = ref(regionData)
const placeChange = () => {
  if (
    props.formObj.address[0] != null &&
    props.formObj.address[1] != null &&
    props.formObj.address[2] != null
  ) {
    address.value =
      props.formObj.address[0] + props.formObj.address[1] + props.formObj.address[2]
  }
}

function getFormData() {
  return state.formData
}

function validateForm(submit) {
  dynamicForm.value.validate((valid, fields) => {
    if (valid) {
      submit()
    }
  })
}

onMounted(() => {
  state.formData = props.formObj
  autoGenerateRules()
})

defineExpose({ getFormData, validateForm })
</script>

<style lang="scss" scoped>
@import url('../styles/global.css');

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
